<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<style>
			/* 1.抓到页面图片元素 */
			img{
				/* 4.过渡 */
				transition:  1s;
			}
			/* 2.鼠标移动到图片上 */
			img{
				/* 3.旋转 */
				
				animation:heart.4s linear infinite;
			}
			 
			@keyframes heart{
				0%{transform:rotate(100deg) scale(1);
				}
				30%{transform:rotate(200deg) scale(.8);
					
				}
				100%{transform:rotate(360deg) scale(1.2);
					
				}
				}
		</style>
	</head>
	<body>
		<!--1.引入大风车图片以及音频-->
		<picture><img src="img/dfc.jpg" alt="大风车" /></picture>
		<audio src="img/dafengche.mp3"autoplay controls></audio>
	</body>
</html>